<template>
  <div class="card-container" :style="{borderColor: props.config.color, color: props.config.color}">
    <div class="card-container-title">
      <div>{{ props.config.title }}</div>
      <div @click="showModal(props.config)" class="line-icon">
        <img src="@/assets/line.svg" width="16"/>
      </div>
    </div>
    <div class="card-container-data"><InfoItem :type="props.config.id" :fontSize="60" :deviceId="props.deviceId"/></div>
    <div>[{{ props.config.unit }}]</div>
  </div>
<DetailModal ref="detailModalRef" :deviceId="props.deviceId"/>

</template>
<script setup lang="ts">
import { ref } from 'vue'
import DetailModal from '@/components/detail/detail-modal/index.vue'
import InfoItem from '@/components/info-item.vue'
const props = defineProps({
  config: {
    type: Object,
    default: () => {}
  },
  deviceId: {
    type: String,
    default: ''
  }
}) as {
  config: Record<string, any>
  deviceId: string
}

const detailModalRef = ref()
const showModal = (config: Record<string, any>) => {
  detailModalRef.value.show(config)
}
</script>
<style lang="less" scoped>
.card-container {
  border: 1px solid;
  border-radius: 4px;
  padding: 6px 12px;
  // margin-bottom: 24px;
  display: flex;
  z-index: 1;
  // justify-content: space-between;
  div:nth-child(1),
  div:nth-child(3){
    width: 50px;
  }
  div:nth-child(3) {
    text-align: right;
  }
  .card-container-data {
    flex: 1;
    text-align: center;
    align-self: center;
    font-weight: 600;
  }
  .card-container-title {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 24px;
    font-weight: bolder;
    .line-icon {
      width: 30px;
      height: 30px;
      background-color: #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
